<template>
    <div class="mheader">
        <Row type="flex" justify="center" style="height:35px;">
            <!-- user info -->
            <Col span="3" offset="4">HI <a href="#/user">{{nickname}}</a>, 欢迎您 <span v-if="nickname.length == 0">[ <a href="#/login" style="color: #ea767a;">登录/注册</a> ]</span></Col>
            <Col span="1" offset="9">
            <a href="#/user">我的账户</a>
            </Col>
            <Col span="1">
            <a href="">帮助中心</a>
            </Col>
            <Col span="2">
            <a href="">联系我们</a>
            </Col>
            <Col span="4"></Col>
        </Row>
        <Row type="flex" justify="start">
            <!-- search -->
            <Col span="3"></Col>
            <Col span="4">
            <a href="#/"><img src="static/images/logo.png" alt=""></a>
            </Col>
            <Col span="9">
            <div class="search">
                <form action="/api/search" method="POST" id="search-form" onsubmit="return false;">
                    <div class="input-wrapper">
                        <input type="search" placeholder="搜索明星、演出、场馆" name="keyword" autocomplete="off" class="search-text">
                        <Button type="error" shape="circle" icon="ios-search">Search</Button>
                    </div>
                    <div class="associate-container">
                        <ul></ul>
                    </div>
                </form>
            </div>
            </Col>
            <Col span="4"></Col>
        </Row>
    </div>
</template>

<script>
  import Cookies from 'js-cookie';

  export default {
    data() {
      return {
        nickname:'',
      };
    },
    mounted() {
      let json = Cookies.get('customer');
      if (json !== undefined) {
        const customer = JSON.parse(json);
        this.nickname = customer.nickname;
      }
    }
  };
</script>


<style lang="css" scoped>
.mheader {
  background-color: #ffffff;
  padding-top: 8px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eeeeee;
}
.search {
  margin: 25px 0 0 150px;
}
.search form {
  position: relative;
}
.search .input-wrapper {
  width: 550px;
  position: absolute;
  height: 40px;
  line-height: 40px;
}
.search input {
  border: 0px;
  position: absolute;
  display: block;
  line-height: 36px;
  outline: 0;
  font-size: 15px;
  box-sizing: content-box;
  padding: 2px 0;
  padding-left: 30px;
  width: 100%;
  border-radius: 30px;
  height: 46px;
  text-shadow: 0 0 0 #747a98;
  -webkit-text-fill-color: transparent;
  background-color: #f2f2f2;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
.search button {
  position: absolute;
  right: -25px;
  top: 5px;
  border: 0;
  outline: 0;
  color: #fff;
  cursor: pointer;
  width: 100px;
  height: 40px;
  line-height: 30px;
  border-radius: 20px;
  background-color: #fd6857;
}
</style>

